<template>
	<div class="LabelInput">
		<label :style="{width:LabelInput.style.labelwidth}"><font v-if="LabelInput.Star!=false" style="color: red;">*</font>{{LabelInput.label}}</label>
		<div class="el-input-box" :style="{width:LabelInput.style.inputwidth}" >
			<city-select v-if="LabelInput.cityselect"></city-select>
			<el-input class="input "  :ref="LabelInput.ref" v-model="LabelInput.name" :value="LabelInput.name" @blur="changetext"  v-if="!LabelInput.cityselect"  :show-password="LabelInput.showpassword"></el-input>
			<el-button class="width" :disabled="LabelInput.disabled" v-if="LabelInput.buttonStart" @click="setRedcode">{{LabelInput.buttonText}}</el-button>
			
		</div>
	</div>
</template>

<script>
	import CitySelect from "./CitySelect.vue";
	export default {
		props:["LabelInput"],
		data() {
			return {
			}
		},
		components: {
			CitySelect
		},
		mounted(){
			
		},
		methods: {
			changetext(){
				this.$parent.getsontext(this.LabelInput)
			},
			setRedcode(){
				this.$parent.getRedcode(this.LabelInput);
			},
		},
	}
</script>

<style scoped lang="less">
	.LabelInput {
		display: flex;
		align-items: center;
		padding: 10px 0;
		box-sizing: border-box;
		color: #555;
		label{
			text-align: right;
			padding-right: 15px;
			box-sizing: border-box;
			font-size: 12px;
			
		}
		.el-input-box {
			display: flex;
			.el-input__inner,.el-button {
				height: 30px;
				line-height: 30px;
				border-color: #e2e2e2;
				border-radius: 0;
			}
			.el-button {
				padding: 0 15px;
				box-sizing: border-box;
			}
			.input{
				flex: 1;

			}
			.width{
				flex: 1;
				margin-left: 20px;
			}
			.el-button.is-disabled, .el-button.is-disabled:focus, .el-button.is-disabled:hover{
				color: aqua
			}
		}}
</style>
